<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<title>欢迎注册MY·HOUSE！</title>
<link href="/myhouse/static/web/css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="/myhouse/static/web/js/jquery.min.js"></script>
<!-- Custom Theme files -->
<!--menu-->
<script src="/myhouse/static/web/js/scripts.js"></script>
<link href="/myhouse/static/web/css/styles.css" rel="stylesheet">
<!--//menu-->
<!--theme-style-->
<link href="/myhouse/static/web/css/style.css" rel="stylesheet" type="text/css" media="all" />
<!--//theme-style-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Real Home  Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
</head>
<body>
<script src="/myhouse/static/web/js/easyResponsiveTabs.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function () {
		$('#horizontalTab').easyResponsiveTabs({
			type: 'default', //Types: default, vertical, accordion
			width: 'auto', //auto or any width like 600px
			fit: true   // 100% fit in a container
		});
	});
</script>
<!--header-->
<jsp:include page="/inc/head.jsp"></jsp:include>
<!--//-->	
<div class=" banner-buying">
	<div class=" container">
		<h3><span>MY</span>house</h3>
	<!---->
<jsp:include page="/inc/menu.jsp"></jsp:include>
	<div class="clearfix"> </div>
		<!--initiate accordion-->
		<script type="text/javascript">
			$(function() {
			    var menu_ul = $('.menu > li > ul'),
			           menu_a  = $('.menu > li > a');
			    menu_ul.hide();
			    menu_a.click(function(e) {
			        e.preventDefault();
			        if(!$(this).hasClass('active')) {
			            menu_a.removeClass('active');
			            menu_ul.filter(':visible').slideUp('normal');
			            $(this).addClass('active').next().stop(true,true).slideDown('normal');
			        } else {
			            $(this).removeClass('active');
			            $(this).next().stop(true,true).slideUp('normal');
			        }
			    });
			
			});
		</script>
      		
	</div>
</div>
<!--//header-->
<!--contact-->
<div class="login-right">
	<div class="container">
		<h3>注册</h3>
		<div class="login-top">
				<div class="form-info">
					<form id="registerCheck">
						<span id="myspan"></span>
						<input type="text"   placeholder="用户名" name="userName"id="userName"><span id="isReName"></span><br>
						<input type="password"   placeholder="密码" name="userPass" id="userPass"><span id="isRePassword"></span><br>
						<input type="password"  placeholder="确认密码 " id="ReuserPass"><span id="isRecheckPassword"></span><br>
						 <label class="hvr-sweep-to-right">
				           	<input type="button" value="注册" id="zc">
				           </label>
					</form>
				</div>
	</div>
</div>
</div>
<%--注册表单验证--%>
<script type="text/javascript">
<%--给每个input加失去焦点验证事件--%>
$(function (){
	$("#userName").blur(userNameCheck);
	$("#userPass").blur(userPassCheck);
	$("#ReuserPass").blur(RePasswordCheck);
	$("#zc").click(checkAll);
});

function checkAll(){
	var flag;
	var userName = $("#userName").val();
	var userPass = $("#userPass").val();
	$.ajax({
		url:"/myhouse/web/isReName",
		type:"post",
		async:false,
		data:{userName:userName,userPass:userPass},
		success:function (mes){
			if (mes == "1"){
				flag = true;
				$.ajax({
					url: "/myhouse/web/userRegister",
					type:"post",
					data: {userName:userName,userPass:userPass},
					success:function (mes){
						if (mes == "1"){
							location.href = "/myhouse/web/login";
						}
					}
				});

			}else if(mes == "0"){
				$("#myspan").html("用户已被注册")
				$("#myspan").css("color","red")
				flag = false;
			}
		}
	});
}

function userNameCheck(){//验证用户名,2-10位含汉字合法字符，
	var reg = /^[\u4e00-\u999ffffA-Za-z0-9_]{2,10}$/;
	var userNameReg = $("#userName").val();
//	要验证用户名是否重复，需要查询所有用户名
	if(reg.test(userNameReg)){
		$("#isReName").text("√");
		$("#isReName").css("color","green");
	}else {
		$("#isReName").text("请输入2-10个包含汉字字符！");
		$("#isReName").css("color","red");
	}
}
function userPassCheck(){//校验密码，密码6-8位无汉字合法字符
	var password = $("#userPass").val();
	var reg = /^\w{6,8}$/;
	if(reg.test(password)&&password!=""){
		$("#isRePassword").text("√");
		$("#isRePassword").css("color","green");
		return true;
	}
	else{
		$("#isRePassword").text("请输入6-8位大小写英文字母或数字！");
		$("#isRePassword").css("color","red");
		return false;
	}
}
function RePasswordCheck(){//校验确认密码
	var RePassword = $("#ReuserPass").val();
	var password = $("#userPass").val();
	if(RePassword==password && RePassword!=""){
		$("#isRecheckPassword").text("√");
		$("#isRecheckPassword").css("color","green");
		return true;
	}
	else{
		$("#isRecheckPassword").text("请保持密码一致！");
		$("#isRecheckPassword").css("color","red");
		return false;
	}
}
</script>
<!--//contact-->
<!--footer-->
<jsp:include page="/inc/footer.jsp"></jsp:include>
<!--//footer-->
</body>
</html>